<template>
  <div class="content">
    <div class="index-header-box" id="head">
      <div class="index-header">
        <div @click="$router.back(-1)" class="back">
          <van-icon name="arrow-left"/>
        </div>
        <div class="title">选择对比车辆</div>
      </div>
    </div>

    <van-row class="page-block">
      <div class="list-cell">
        <van-checkbox-group v-model="pk" v-if="info.car" class="media-pk-list">
          <van-checkbox name="a">
            <van-image fit="cover" class="media-list-logo pull-left" lazy-load :src="img(info.car.series_thumb)">
              <template v-slot:loading>
                <van-loading type="spinner" size="20"/>
              </template>
            </van-image>
            <div class="media-list-body pull-left">
              <div class="media-list-text-top">{{info.car.car_name}}</div>
              <div class="media-list-text-tps">{{stampToDate(info.card_time,2)}}/{{info.mileage}}万公里</div>
              <div class="media-list-text-bottom">{{info.price}}万</div>
            </div>
          </van-checkbox>
        </van-checkbox-group>
      </div>
    </van-row>

    <div class="pk-box">
      <div class="item pull-left" @click="listShow=false" :class="{'active':!listShow}">浏览过的</div>
      <div class="item pull-left" @click="listShow=true" :class="{'active':listShow}">收藏的</div>
    </div>

    <van-row v-if="!listShow" class="page-block">
      <van-list class="list-cell no-border" :finished="true" finished-text="没有更多了">

          <div v-for="(item,key) in historyList">
          <van-checkbox-group v-model="historyArr" class="media-pk-list" v-if="item.car_id!=info.car_id">
            <van-checkbox :name="item.id">
              <van-image fit="cover" class="media-list-logo pull-left" lazy-load :src="img(item.car?item.car.series_thumb:item.series.series_name,item.head_img)">
                <template v-slot:loading>
                  <van-loading type="spinner" size="20"/>
                </template>
              </van-image>
              <div class="media-list-body pull-left">
                <div class="media-list-text-top">{{item.car?item.car.car_name:item.series.series_name}}</div>
                <div class="media-list-text-tps">{{stampToDate(item.card_time,2)}}/{{item.mileage}}公里</div>
                <div class="media-list-text-bottom">{{item.price}}万</div>
              </div>
            </van-checkbox>
          </van-checkbox-group>
          </div>
      </van-list>
    </van-row>

    <van-row v-if="listShow" class="page-block">
      <van-list class="list-cell no-border" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">

        <div v-for="(item,key) in list">
          <van-checkbox-group v-model="result" class="media-pk-list" v-if="item.car_id!=info.car_id">
            <van-checkbox :name="item.uc_id">
              <van-image fit="cover" class="media-list-logo pull-left" lazy-load :src="img(item.series_thumb)">
                <template v-slot:loading>
                  <van-loading type="spinner" size="20"/>
                </template>
              </van-image>
              <div class="media-list-body pull-left">
                <div class="media-list-text-top">{{item.car_name}}</div>
                <div class="media-list-text-tps">{{stampToDate(item.card_time,2)}}/{{item.mileage}}万公里</div>
                <div class="media-list-text-bottom">{{item.price}}万</div>
              </div>
            </van-checkbox>
          </van-checkbox-group>
        </div>

      </van-list>
    </van-row>


    <div class="btn-box">
      <van-button type="info" class="btn-primary" @click="goPk">开始对比</van-button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "pk",
    components: {},
    data() {
      return {
          id:this.$route.query.id,
          info:[],
        historyList: [],
          list:[],
        loading: false,
        finished: false,
        listShow: false,
        page:1,

          historyArr: [],
        result: [],
        pk: ['a'],
      }
    },
    computed: {},
    mounted: function () {
      this.init();
      this.getHistory();
    },
    methods: {
        init() {
            this.$api.car.detail(this.id).then(res => {
                var res = res.data;
                this.info = res.data;
            });
        },

      onLoad() {
        let that = this;
        this.$api.member.getCollect(that.page,0).then(res=>{
          res=res.data;
          if (res.data.data.length>0) {
            that.list.push(...res.data.data);
            that.page++;

            that.loading = false;
          } else {
            that.finished = true;
          }
        });
      },

        //浏览记录
      getHistory() {
          this.$api.car.carHistory().then(res=>{
              var res=res.data;
              this.historyList=res.data;
          });
      },

      goPk() {
            if(this.pk.length==0){
                this.$toast("请选择对比车辆！");
                return false;
            }

            if(this.historyArr.length==0 && this.result.length==0){
                this.$toast("只少选择一辆对比车辆！");
                return false;
            }

            var arr=[];
            if(this.historyArr.length>0){
                this.historyArr.find(res=>{
                    arr.push(res);
                });
            }

          if(this.result.length>0){
              this.result.find(res=>{
                  arr.push(res);
              });
          }

          const set = new Set(arr);
          arr=[...set];

          this.$router.push({ name: 'Compare', params: { id: this.info.id,other:arr }})
      }
    },
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/scss/index.scss";
</style>
